<template>

  <div>

    <div class="main">
      <div class="booklist" v-for=" (item,index) in listdata" :key="index"  @click="openRead(item)">
        <img :src="item.cover" alt="" width="100px" height="140px" />
        <p v-html="item.name">边城</p>
        <div class="sele" v-show="options">
          <img src="../../../../../static/shujia/xunzhong.png" alt="" width="25px" height="25px" v-if="item.active" />
          <img src="../../../../../static/shujia/null.png" alt="" width="25px" height="25px" v-else />
        </div>
      </div>
      <div class="delbook" @click="delbookinfo" v-show="options">
        <!--<img src="../../../../../static/discover/delbook.png" width="44px" height="40" />-->
        删除收藏
      </div>

    </div>

  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { MessageBox } from "mint-ui";
import baseurl from "./../../../../api/baseurl.js";

export default {
  props: ["options"],
  data() {
    return {
      pageindex: 1,
      listdata: []
    };
  },
  created() {
    var str = localStorage.getItem("userid"); //取
    this.userid = JSON.parse(str);
    this.getinfo();
  },
  methods: {
    delopt(item) {
      if (this.options) {
        item.active = !item.active;
      }
    },
    openRead(item) {
     if(this.options){
       this.delopt(item)
     }else{
        this.$router.push({
        name: "bookcontent"
      });
      localStorage.bookId = item.fileId;
     }
    },
    getinfo() {
      this.$http({
        method: "post",
        url: baseurl.urls + "/collection/selectCollection",
        params: {
          userid: this.userid,
          pageNo: this.pageindex,
          columntype: 1,
          pageSize: 30
        }
      })
        .then(response => {
          if (response.status == 200) {
            const listdata = response.data.date.list;
            listdata.map(book => (book.active = false));
            this.listdata = listdata;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    delbookinfo() {
      const delbookid = [];
      for (let item of this.listdata) {
        if (item.active == true) {
          delbookid.push(item.id);
        }
      }
      const delid = delbookid.join(",");
      if (delid.length == 0) {
        Toast("请选择删除项")
        return;
      }
      // console.log(delid);
      MessageBox.confirm("", "确认删除收藏嘛？")
        .then(action => {
          this.$http({
            method: "post",
            url: baseurl.urls + "/collection/deleteCollection",
            params: {
              id: delid
            }
          })
            .then(response => {
              if (response.status == 200) {
                this.getinfo();
                Toast("删除收藏成功");
              }
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.main {
  width: 95%;
  margin: 0 auto;
  /*background: cornflowerblue;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.main::after {
  content: "";
  width: 100px;
}
.main .booklist {
  width: 100px;
  margin-bottom: 15px;
  position: relative;
}
.main .booklist img {
  border-radius: 5px;
  box-shadow: darkgrey 2px 2px 5px;
}

.main .booklist p {
  width: 100px;
  word-wrap: break-word;
  font-size: 14px;
   overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*选择图片*/
.main .sele {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 0;
  top: 0;
}
.main .sele>img{
  box-shadow: none;
}
.main .delbook {
  position: fixed;
  left: 0;
  bottom: 3px;
  background: skyblue;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 5vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
</style>